<template>
	<div class="bgc w-full pt-3 h-16 text-center">
		<p class="text-white text-xl font-bold">可视化展板</p>
		<span class="absolute right-10 top-3 text-white">当前时间: {{ time }}</span>
	</div>
</template>

<script>
export default {
	data() {
		return {
			time: null
		}
	},
	mounted() {
		this.formatter()
	},
	destroyed() {
		clearInterval(timer)
	},
	methods: {
		formatter() {
			const timer = setInterval(() => {
				const DATE = new Date()
				let y = DATE.getFullYear()
				let mon = DATE.getMonth() + 1
				let d = DATE.getDate()
				let date = d > 10 ? d : `0${d}`
				let h = DATE.getHours()
				let hour = h > 10 ? h : `0${h}`
				let m = DATE.getMinutes()
				let min = m > 10 ? m : `0${m}`
				let s = DATE.getSeconds()
				let seconds = s > 10 ? s : `0${s}`
				this.time = y + '年' + mon + '月' + date + '日' + ' - ' + hour + '时' + min + '分' + seconds + '秒'
			}, 1000)
		}
	}
}
</script>

<style></style>
